<template>
  <div class="shop" v-loading="loading">
    <div class="header" style="display: flex; justify-content: space-between;">
      <div>
        <!-- <el-button v-if="hasBtn('')" type="primary" size="mini" @click="exportOrderData">导出数据</el-button> -->
      </div>
      <div>
        <!-- <FormSearch
        ref="formSearch"
        :forms="searchForm"
        @handleSearch="handleSearch"
        @handleReset="handleReset"
      /> -->
        <el-form ref="from" :model="query" :inline="true">
          <!-- <el-form-item label="订单时间:">
            <el-date-picker v-model="rongDate" size="mini" clearable range-separator="至" start-placeholder="开始时间"
              end-placeholder="结束时间" :type="'datetimerange'" :format="'yyyy-MM-dd HH:mm:ss'"
              :value-format="'yyyy-MM-dd HH:mm:ss'" />
          </el-form-item> -->


          <!-- <el-form-item label="">
            <el-select v-model="query.orderStatus" size="mini" clearable placeholder="请选择订单状态">
              <el-option label="待支付" :value="1" />
              <el-option label="已支付待核销" :value="5" />
              <el-option label="已核销（已完成）" :value="10" />
              <el-option label="已取消（订单未支付）" :value="15" />
              <el-option label="已失效（关闭）" :value="20" />
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item label="">
            <el-select v-model="query.orderType" size="mini" clearable placeholder="请选择缴费类型">
              <el-option  label="请选择" :value="0" />
              <el-option label="全额充值" :value="1" />
              <el-option label="部分充值" :value="2" />
            </el-select>
          </el-form-item> -->

          <el-form-item label=""><el-input v-model="query.mobile" size="mini" clearable
              placeholder="请输入用户账号" /></el-form-item>

          <el-form-item>
            <el-button type="primary" size="mini" @click="handleSearch">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-table class="table-box" :data="tableData" style="width:100%" :cell-style="tc" :max-height="screenHight"
      :header-cell-style="tccolor">
      <el-table-column label="订单编号" prop="orderNo"></el-table-column>
      <el-table-column label="下单用户">
        <template slot-scope="scope">
          <p>{{ scope.row.memberName }}</p>
        </template>
      </el-table-column>
      <el-table-column label="付款金额">
        <template slot-scope="scope">
          <p v-if="scope.row.payAmount">¥{{ scope.row.payAmount }}</p>
          <p v-else>---</p>
        </template>
      </el-table-column>
      <el-table-column label="已认领小店">
        <template slot-scope="scope">
          <p v-if="scope.row.shopName">{{ scope.row.shopName }}</p>
          <p v-else>---</p>
        </template>
      </el-table-column>
      <el-table-column label="小店地址">
        <template slot-scope="scope">
          <p v-if="scope.row.shopAddress">{{ scope.row.shopAddress }}</p>
          <p v-else>---</p>
        </template>
      </el-table-column>
      <el-table-column label="支付流水号" width="200">
        <template slot-scope="scope">
          <p v-if="scope.row.paySn">{{ scope.row.paySn }}</p>
          <p v-else>---</p>
        </template>
      </el-table-column>
      <el-table-column label="支付状态" prop="orderStatusText"></el-table-column>
      <el-table-column label="缴费类型" prop="orderTypeText">
        <!-- <template slot-scope="scope" prop="payStatusText">
        <p v-if="scope.row.order_type == 40">全额入驻</p>
        <p v-if="scope.row.order_type == 41">押金缴费入驻</p>
        </template> -->
      </el-table-column>
      <el-table-column label="创建时间" prop="createdAt"></el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background @current-change="pageChange" :current-page="query.pageNum" :page-size="query.pageSize"
        :page-sizes="[20]" layout="total, sizes, prev, pager, next, jumper" :total="total" />
    </div>
  </div>
</template>

<script>

import { getSettleInOrder } from "@/api/myProfit"
import FormSearch from '@/components/FormSearch'
import { API_BASE_URL } from "@/config";
export default {
  components: {
    // FormSearch
  },
  data() {
    return {
      loading: true,
      page: 1,
      size: 20,
      total: 0,
      query: {
        pageNum: 1,
        pageSize: 20,
        /**
             * 订单创建开始时间
             */
        beginTime: '',
        /**
         * 订单创建结束时间
         */
        endTime: '',
        /**
         * 搜索
         */
        keyword: '',
        /**
         * 用户账号
         */
        mobile: '',
        /**
         * 订单编号
         */
        orderNo: '',
        /**
         * 订单状态 1待支付 5：已支付待核销 10：已核销（已完成）15：已取消（订单未支付）20：已失效（关闭）
         */
        orderStatus: undefined,
        /**
         * 订单类型
         */
        orderType: undefined,

        /**
         * 合伙人id
         */
        partnerId: sessionStorage.getItem('partnerId'),
        /**
         * 小店id
         */
        sellerId: undefined,
        /**
         * 服务经理账号
         */
        serviceMobile: '',

      },
      searchForm: {
        form: [
          {
            type: 'datePicker',
            rangeType: 'datetimerange',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            key: 'createTime',
            label: '订单时间:'
          },
          {
            type: 'select',
            key: 'order_types[]',
            placeholder: '请选择缴费类型',
            options: [
              {
                label: '全部缴费',
                value: '40'
              },
              {
                label: '押金缴费',
                value: '41'
              }
            ]
          },
          {
            type: 'select',
            key: 'order_status_in',
            placeholder: '订单状态',
            options: [
              {
                label: '待支付',
                value: '1,15'
              },
              {
                label: '已支付',
                value: '5,10'
              },
              {
                label: '已取消',
                value: '20'
              }
            ]
          },
          {
            type: 'input',
            key: 'mobile',
            placeholder: '请输入用户账号',
          }
        ]
      },
      tableData: [],
      rongDate: [],
    }
  },
  mounted() {
    this.getSettleInOrderList()
  },
  methods: {
    handleSearch() {
      this.query.pageNum = 1
      console.log(this.rongDate)
      if (this.rongDate.length) {
        this.query.beginTime = this.rongDate[0] + ''
        this.query.endTime = this.rongDate[1] + ''
        // delete formValue.createTime
      }
      this.getSettleInOrderList()
    },
    handleReset() {
      // this.form = {},
      this.query.pageNum = 1
      this.getSettleInOrderList()
    },
    exportOrderData() {
      const params = {
        ...this.form,
        is_export: 1
      }
      this.getSettleInOrderList()
    },
    pageChange(page) {
      this.query.pageNum = page
      // const params = {
      //   page,
      //   ...this.form
      // }
      this.getSettleInOrderList()
    },
    //获取加盟订单列表
    async getSettleInOrderList() {
      let res = await getSettleInOrder(this.query)
      if (res.code === 200) {
        // if(params.is_export === 1) {
        //   window.open(`${API_BASE_URL}/admin/download/zip/${res.data[1].download_token}`)
        // } else {
        this.loading = false
        this.tableData = res.data.list
        this.total = res.data.total
        // }
      } else {
        this.loading = false
        this.$message.error(res.message)
      }
    },
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    }
  }
}

</script>

<style lang="scss" scoped>
.shop {
  background-color: #fff;
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;

  .header {
    display: flex;
    justify-content: space-between;
    height: 30px;
    margin-bottom: 20px;
  }

  .table-box {
    height: calc(100vh - 220px);
  }

  .pagination {
    position: absolute;
    bottom: 15px;
    right: 20px;
    z-index: 99;
  }
}
</style>
